<template>
  <!-- 文字提示tootip  button -->
  <el-tooltip
    :disabled="!buttonInfo.tooltip"
    :content="buttonInfo.tooltip"
    :placement="buttonInfo.placement"
    v-if="visible"
    :effect="buttonInfo.effect"
  >
    <!-- 气泡确认框popconfirm button -->
    <el-popconfirm
      v-if="buttonInfo.popconfirm"
      :confirm-button-text="buttonInfo.confirmButtonText"
      :cancel-button-text="buttonInfo.cancelButtonText"
      :icon="buttonInfo.icon"
      :icon-color="buttonInfo.iconColor"
      :hide-icon="buttonInfo.hideIcon"
      @confirm="confirm"
      @cancel="cancel"
      :title="buttonInfo.title"
    >
      <el-button
        slot="reference"
        @click.native.prevent="click"
        @click.stop
        :icon="buttonInfo.icon"
        :type="buttonInfo.type"
        :plain="plain"
        :loading="loading"
        :class="buttonInfo.disabled ? 'is-disabled' : ''"
        :circle="buttonInfo.circle"
        :size="buttonInfo.size"
      >
        {{ buttonInfo.text }}
      </el-button>
    </el-popconfirm>

    <!-- 上传按钮 -->
    <form-import
      v-else-if="buttonInfo.import"
      :class="importButtonClassName"
      v-bind="buttonInfo"
      v-on="$myListeners"
    ></form-import>

    <!-- 普通按钮 -->
    <el-button
      v-else
      @click.native.prevent="click"
      @click.stop="operation = true"
      :icon="buttonInfo.icon"
      :plain="plain"
      :type="buttonInfo.type"
      :loading="loading"
      :style="buttonInfo.style"
      :class="buttonInfo.disabled ? 'is-disabled' : ''"
      :circle="buttonInfo.circle"
      :size="buttonInfo.size"
    >
      {{ buttonInfo.text }}
    </el-button>
  </el-tooltip>
</template>

<script>
import formImport from "../form/import.vue";
export default {
  name: "button-input",
  components: {
    formImport,
  },
  data() {
    return {
      loading: false,
      title2: "您确认要执行该操作吗？",
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    importButtonClassName: {
      type: String,
      default: "import-button",
    },
    confirmButtonText: {
      type: String,
      default: "确认",
    },
    cancelButtonText: {
      type: String,
      default: "取消",
    },
    circle: {
      type: Boolean,
      default: false,
    },
    action: String,
    name: String,
    load: Boolean,
    headers: Object,
    permission: String,
    button: {
      type: Object,
    },
    plain: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
    iconColor: {
      type: String,
      default: "red",
    },
    hideIcon: {
      type: Boolean,
      default: false,
    },
    tooltip: String,
    placement: String,
    text: String,
    popconfirm: Boolean,
  },
  computed: {
    $myProps() {
      let myProps = this.$public.inheritProps(this);

      myProps["action"] = myProps["actionUrl"];

      return myProps;
    },
    $myListeners() {
      return this.$public.inheritListeners(this);
    },
    buttonInfo() {
      let info = this.button || this.$myProps;

      //上传
      info.action = this.action || info.action || "";
      info.headers = this.headers || info.headers || "";
      info.load = this.load || info.load || "";
      info.name = this.name || info.name || "";

      info.style = info.css || "";
      info.icon = this.icon || info.icon;
      info.title = info.title || this.title;
      info.text = this.text || info.text;
      info.type = this.type || info.type || "";
      info.text = this.text || info.text || "";

      info.tooltip = this.tooltip || info.tooltip || "";
      info.popconfirm = info.popconfirm || this.popconfirm;
      info.effect = info.effect || "dark";
      info.placement = this.placement || info.placement || "top";
      info.confirmButtonText = this.confirmButtonText || info.confirmButtonText;
      info.cancelButtonText = this.cancelButtonText || info.cancelButtonText;

      info.title = info.title || this.title2;
      info.icon = this.icon || info.icon;
      info.circle = this.circle || info.circle;
      info.size = this.size || info.size;
      info.text = this.text || info.text;
      info.tiptext = this.tiptext || info.tiptext || info.text;
      //  info.permission = this.permission || info.permission
      //  if (info.permission === undefined) {
      //      info.permission = ''
      //  }

      info.iconColor = this.iconColor || info.iconColor || "";
      info.hideIcon = this.hideIcon || info.hideIcon || "";

      return info;
    },
  },
  created() {
    if (this.permission) {
      let permissions = this.$store.getters.permissions;
      let ents = permissions.filter(
        (c) => c.url.toUpperCase() == this.$route.path.toUpperCase()
      );
      if (ents.length > 0) {
        let permissionArr = ents[0].permission;
        if (permissionArr.indexOf(this.permission) < 0) {
          this.visible = false;
        }
      }else{
          // this.visible = false;
      }
    }
  },
  methods: {
    confirm(e) {
      this.$emit("confirm", e);
    },
    click(e) {
      this.$emit("click", e);
    },
    cancel(e) {
      this.$emit("cancel", e);
    },
  },
};
</script>

<style scoped>
.import-button {
  display: inline-block;
}
</style>